<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab选项卡</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#tab{
			width: 402px;
			height: 400px;
			margin: 10px auto;
		}
		#tabList{
			height: 40px;
			list-style: none;
			border: 1px solid black;
		}
		#tabList li{
			width: 99px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			float: left;
			border-right: 1px solid black;

		}

		#content{
			width: 400px;
			height: 400px;
			border: 1px solid orange;
			border-top: none;
			position: relative;
			overflow: hidden;
		}
		#content div{
			width: 400px;
			height: 400px;
			text-align: center;
			line-height: 400px;
			font-size: 40px;
			position: absolute;
			top: 400px;
			background: orange;
			
		}




	</style>
</head>
<body>
<div id="tab">
	<ul id="tabList">
		<li>语文</li>
		<li>数学</li>
		<li>英文</li>
		<li>理综</li>
	</ul>
	<div id="content">
		<div>语文</div>
		<div>数学</div>
		<div>英文</div>
		<div>理综</div>
	</div>	
</div>
	<script type="text/javascript">
	
	var oLis = document.getElementById("tabList").getElementsByTagName("li");
	var oDivs = document.getElementById("content").getElementsByTagName("div");
	oDivs[0].style.top = "0px";
	oLis[0].style.backgroundColor = "orange";
	tab(oLis,oDivs);

	

	function tab(tabs,contents){
		for (var i = 0; i < tabs.length; i++) {
			tabs[i].index = i;
			var t;
			tabs[i].onclick = function(){
				clearInterval(t);
				for (var j = 0; j < contents.length; j++) {
					contents[j].style.top = "400px";
					tabs[j].style.backgroundColor = "#fff";
				}
				var idx = this.index;
				 t = setInterval(function(){
					contents[idx].style.top = contents[idx].offsetTop - 10 + "px";
					if (contents[idx].offsetTop==0) {
						clearInterval(t);
					}
				},30);
				// contents[this.index].style.top = "0px";




				this.style.backgroundColor = "orange";

			}
		}
	}


	</script>
</body>
</html>